import { ref, unref, watchEffect } from 'vue'

/**
 * 第一版本：url支持 ref 或 string
 */
// export function useFetch(url) {
//   const data = ref(null)
//   const error = ref(null)

//   fetch(unref(url))
//     .then((response) => response.json())
//     .then((resp) => {
//       // 将 resp 赋值给 data
//       data.value = resp
//     })
//     .catch((err) => {
//       // 将 err 赋值给 error
//       error.value = err
//     })

//   return { data, error }
// }

/**
 * 第二个版本：支持 url 数据的更新
 */
export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)

  function fetchData() {
    // 重置数据
    data.value = null
    error.value = null

    fetch(unref(url))
      .then((response) => response.json())
      .then((resp) => {
        // 将 resp 赋值给 data
        data.value = resp
      })
      .catch((err) => {
        // 将 err 赋值给 error
        error.value = err
      })
  }

  watchEffect(fetchData)

  return { data, error }
}
